<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">
        <el-col :span="8" :xs="24" :offset="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>关于我</span>
            </div>
            <div class="userBox">
              <pan-thumb :image="activeImg" :height="'100px'" :width="'100px'" :hoverable="false">
                <btnFile @success="setImageUrl">
                  <el-link type="primary" class="change-avatar">更换头像</el-link>
                </btnFile>
              </pan-thumb>
              <div class="textPeson">
                {{ user.name }}
              </div>
            </div>
            <div class="textPeson"><el-tag type="success" size="mini">{{ roleObj[user.role] }}</el-tag></div>
            <div class="textPeson">{{ user.synopsis }}</div>
            <el-divider />
            <el-form ref="form" :model="pageForm" :rules="rules" label-position="right" label-width="150px">
              <el-form-item label="昵称：">
                <el-input v-model="pageForm.name" />
              </el-form-item>
              <el-form-item label="签名：">
                <el-input v-model="pageForm.synopsis" />
              </el-form-item>
              <el-form-item label="原密码：" prop="password">
                <el-input v-model="pageForm.password" type="password" />
              </el-form-item>
              <el-form-item label="新密码：">
                <el-input v-model="pageForm.newPassword" type="password" />
              </el-form-item>
              <el-form-item label="确认密码：" prop="newPasswordto">
                <el-input v-model="pageForm.newPasswordto" type="password" />
              </el-form-item>
            </el-form>
            <el-button type="warning" style="width: 100%; margin-top: 15px" @click="userEdit">修 改</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import btnFile from '../common/btnFile'
import { getUserRole } from '@/utils/auto'
import db from '../../utils/localstorage'
export default {
  name: 'Profile',
  components: { PanThumb, btnFile },
  data() {
    return {
      user: db.get('USER'),
      activeImg: this.$baseURL + '/' + db.get('USER').avatar,
      roleObj: {},
      pageForm: {},
      rules: {
        password: [{ required: true, message: '原密码不正确', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            this.$get('/user/longinPassword', { password: value }).then(res => {
              if (res.data.status === 1) {
                callback()
              } else {
                callback(new Error(res.data.message))
              }
            })
          }, trigger: 'blur' }],
        newPasswordto: [{ required: true, message: '原密码不正确', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (this.pageForm.newPassword && value === this.pageForm.newPassword) {
              callback()
            } else {
              callback(new Error('两次密码不一致'))
            }
          }, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    getUserRole().then(res => {
      const { obj } = res
      this.roleObj = obj
    })
    this.init()
  },
  methods: {
    reset() {
      // 先清除校验，再清除表单，不然有奇怪的bug
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    },
    init() {
      // eslint-disable-next-line no-unused-vars
      const { password, avatar, ...unpassword } = this.user
      this.pageForm = unpassword
    },
    setImageUrl(pathList) {
      const data = pathList[0].response.data
      this.activeImg = data.fileFullPath
      console.log(this.user)
      this.$put('user/update', { _id: this.user._id, avatar: `${data.filePath}/${data.fileName}` }).then(res => {
        if (res.data.status === 1) {
          this.$message.success(res.data.message)
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    userEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$put('user/passwordEdit', this.pageForm).then(res => {
            if (res.data.status === 1) {
              this.$message.success(res.data.message + ':本次退出系统后即生效')
              this.reset()
            } else {
              this.$message.warning(res.data.message)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .el-card.is-always-shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .el-card {
    border: none;
    border-radius: 0;
  }
  .userBox {
    width: 100px;
    margin: 0 auto;
  }
  .app-container {
      height: 90%;
  }
  .textPeson {
    text-align: center; margin-top: 15px
  }
</style>
